import Taro from '@tarojs/taro';
import {Image, View} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import head from "../../../asset/images/head.png";
import None from "../../../asset/images/none.png";
import Icon1 from "../../../asset/myImages/icon_1.png";
import Icon2 from "../../../asset/myImages/icon_2.png";
import Icon3 from "../../../asset/myImages/icon_3.png";
import jia from "../../../asset/myImages/jia.png";
import jian from "../../../asset/myImages/jian.png";
import Right from "../../../asset/images/right1.png";
import SelectList from "../../../components/select-list/selectList";
import './myTrain.scss';


class MyCoupon extends Taro.Component {
    config = {
        // navigationBarTitleText: '',
        // backgroundColor: '#fff',
        navigationStyle:'custom',
    };

    state = {
        classDate: '',
        is_type: 0, //0 普通用户、1教练申请中、 2教练审请通过、3教练申请未通过
        dataWrap: [],
        dataList: [],
        numStaus: false,
        num: 0, //当前人数
        maxNum: 0, //初始人数最多
        minMun: 0, //初始人数最低
        curNum: 0, //初始值人数
        dispatchId: 0,
    };

    temp = {
        on_status: false
    };

    componentDidMount() {
        const option = this.$router.params;
        const {setClassDate} = this.props;
        this.setState({
            is_type: option.coachFlag,
            classDate: setClassDate,
        }, () => {
            if (option.coachFlag == 2) { //教练审请通过
                this.trainList(); //请求我的订单列表
                this.getMyDispatchInfo(); //我的排课统计数据
            } else if (option.coachFlag == 3) {
                unite.showToast('您提交申请未通过，请重新填写提交');
                setTimeout(() => {
                    Taro.navigateTo({url: '../train-apply/trainApply'});
                }, 1500 )
            }
        });
    }

    //请求我的订单列表
    trainList = () => {
        const {classDate} = this.state;
        const params = {
            url: '/wx/coach/myDispachClassOrderInfo?classDate='+classDate,
            data:{
                classDate: classDate,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            dataList: res.data
                        })
                    }
                }
            }
        })
    };

    //我的排课统计数据
    getMyDispatchInfo = () => {
        const params = {
            url: '/wx/coach/myDispatchInfo',
            data:{}
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            dataWrap: res.data
                        })
                    }
                }
            }
        })
    };

    //选择日期
    getTimers = (time) => {
        this.setState({
            classDate: time
        }, () => {
            this.trainList();
        });
    };

    //改变人数
    numStatusAlert = (minMax, maxNum, nums, dispatchId, curNum) => {
        const num = nums ? nums.charAt(0) : 0;
      this.setState(prevState => ({
          numStaus: !prevState.numStaus,
          minMax: minMax || 0,
          maxNum,
          num: Number(num),
          dispatchId: dispatchId || 0,
          curNum, //初始值人数
      }))
    };

    //修改人数
    alertNum = (type) => {
        const {maxNum, minMax} = this.state;
        this.setState(prevState => ({
            num: type ?  prevState.num >= maxNum ? prevState.num : Number(prevState.num)+1 : prevState.num <= minMax ? minMax : Number(prevState.num) - 1
        }))
    };

    //确认修改
    commirnumStatus = (is) => {
        //is == 1 还原
        const {dispatchId, num, minMax, curNum} = this.state;
        if (num < minMax) return unite.showToast('人数最低为' + minMax);
        const params = {
            url: '/wx/coach/handleSubscribeNum',
            data:{
                dispatchId: dispatchId,
                num: is == 1 ? curNum : num,
            }
        };
        if (this.temp.on_status) return;
        this.temp.on_status = true;
        this.setState({
            numStaus: false,
        });
        request(params).then(res => {
            this.temp.on_status = false;
            if (res) {
                if(res.code == 200) {
                    unite.showToast('修改成功');
                    setTimeout(() => {
                        this.trainList();
                    }, 1500)
                }
            }
        })
    };

    //跳转地图
    goToMap = (roomName, address, latitude, longitude, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        if (latitude) {
            Taro.openLocation({
                latitude: Number(latitude),
                longitude: Number(longitude),
                name: roomName,
                address: address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    render() {
        const {is_type, dataList, dataWrap, numStaus, num, maxNum} = this.state;
        const option = this.$router.params;
        //is_type 0 普通用户、1教练申请中、 2教练审请通过、3教练申请未通过
        return (
            <View className="myPage">
                <View className={`train-top-bg flex-lr ${is_type ? 'train-top-bg-active' : ''}`} style={'height:' + (Taro.getSystemInfoSync()['statusBarHeight']+200) + 'px;'}>
                    <View className="head-text">
                        <View>{dataWrap.classCnt}</View>
                        <View className="head-title">今日排课数/节</View>
                    </View>
                    <Image className="head-img" src={option.avatar || head}/>
                    <View className="head-text">
                        <View>{dataWrap.classHour}</View>
                        <View className="head-title">今日上课时量/节</View>
                    </View>
                </View>
                {(is_type == 0 || is_type == 3) &&( //普通用户
                    <View className="none-wrap-page">
                        <Image className="none-img" src={None}/>
                        <View>加入我们</View>
                        <View className="none-btn" onClick={() => {Taro.navigateTo({url: '../train-apply/trainApply'})}}>成为教练</View>
                    </View>
                )}
                {is_type == 2 && ( //2教练审请通过
                    <View className="train-content-wrap">
                        <View className="content-top flex-lr">
                            <View className="top-list" onClick={() => {Taro.navigateTo({url: '../train-coursey/trainCourse'})}}>
                                <Image className="top-img" mode="widthFix" src={Icon1}/>
                                <View>排课</View>
                            </View>
                            <View className="top-list" onClick={() => {Taro.navigateTo({url: '../my-arranging/myArranging'})}}>
                                <Image className="top-img" mode="widthFix" src={Icon2}/>
                                <View>查看排课</View>
                            </View>
                            <View className="top-list" onClick={() => {Taro.navigateTo({url: '../train-order/trainOrder'})}}>
                                <Image className="top-img" mode="widthFix" src={Icon3}/>
                                <View>订单</View>
                            </View>
                        </View>
                        <View className="content-title-wrap flex-l">
                            <View className="left-heng"></View>
                            <View>我的预约</View>
                        </View>
                        <SelectList onTimer={this.getTimers}/>
                        <View className="content-list-wrap">
                            {dataList.length != 0 ? (
                                <View>
                                    {dataList.map((item, index) => (
                                        <View className="list-wrap" key={index}>
                                            <View className="list-top flex-lr">
                                                <View className="shop-name">{item.resRoom.roomName}</View>
                                                <View className="flex-r" onClick={this.goToMap.bind(this, item.resRoom.roomName,item.resRoom.address,item.resRoom.latitude, item.resRoom.longitude)}>
                                                    <View>查看地图</View>
                                                    <View className="arrow"></View>
                                                </View>
                                            </View>
                                            {item.orderInfos.map((value, is) => (
                                                <View className={`goods-list flex-lr ${(Number(item.orderInfos.length) -1) == is ? 'goods-list-none' : ''}`} key={is}>
                                                    {/*<Image className="goods-img" src={value.avatar}/>*/}
                                                    <View className="goods-detail">
                                                        <View className="flex-l goods-name">
                                                            <View className="">{value.className}</View>
                                                            <View className={`status-name flex-center ${value.orderState == 3 ? 'names1' : ''}`}>{value.orderState == 2 ? '待进行' : '已结束'}</View>
                                                        </View>
                                                        <View className="flex-l">
                                                            <View className="goods-time">{value.classBeginTime}</View>
                                                            <View className="goods-time-next">{'-'+ value.classEndTime}</View>
                                                        </View>
                                                        <View className="flex-l text-overflow gg-js">{value.houseName}</View>
                                                    </View>
                                                    {value.operateNum == 'Y' ? (
                                                        <View className="goods-super" onClick={this.numStatusAlert.bind(this, value.minNum, value.maxNum, value.classScaleName, value.dispatchId, value.curNum)}>
                                                            <View class="goods-next flex-r">
                                                                <View>{value.classScaleName}</View>
                                                                <Image className="rt-icon" src={Right}></Image>
                                                            </View>
                                                            {/*<View className="tishi">增加1人</View>*/}
                                                        </View>
                                                    ) : (
                                                        <View className="goods-super">{value.classScaleName}</View>
                                                    )}
                                                    {/*{value.orderState == 2 &&(*/}
                                                    {/*    <Image mode="widthFix" className="goods-status" src={daijx}/>*/}
                                                    {/*)}*/}
                                                    {/*{value.orderState == 3 &&(*/}
                                                    {/*    <Image mode="widthFix" className="goods-status" src={yijs}/>*/}
                                                    {/*)}*/}
                                                </View>
                                            ))}
                                        </View>
                                    ))}
                                </View>
                            ) : (
                                <View className="none-wrap-page">
                                    <Image className="none-img" src={None}/>
                                    <View>暂无学员预约...</View>
                                    {/*<View className="none-btn" onClick={() => {Taro.navigateTo({url: '../arranging-coursey/arrangingCoursey'})}}>去排课</View>*/}
                                </View>
                            )}
                        </View>
                    </View>
                )}
                {numStaus &&(
                    <View className="model-type flex-bottom" onClick={this.numStatusAlert}>
                        <View className="select-model-content" onClick={(e) => {e.stopPropagation()}}>
                            <View className="select-text">初始人数</View>
                            <View className="flex-lr selct-nums">
                                <Image className="icon-jias" src={jian} onClick={this.alertNum.bind(this, 0)}/>
                                <View>{num} / {maxNum}</View>
                                <Image className="icon-jias" src={jia} onClick={this.alertNum.bind(this, 1)}/>
                            </View>
                            <View className="flex-lr btns-wrap">
                                <View className="btns flex-center" onClick={this.commirnumStatus.bind(this, 1)}>还原</View>
                                <View className="btns btns-cofmir flex-center" onClick={this.commirnumStatus}>确认</View>
                            </View>
                        </View>
                    </View>
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {setClassDate} = state;
    return {
        setClassDate
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyCoupon);



